<style lang="less" scoped></style>

<template>
    <div>
        <Row class="query">
            <Col span="22">
                教材名称 ：<Input v-model="query.name" clearable style="width: 17%"></Input>
                <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </Row>
        <div class="main-table" style="margin-top: 20px;">
            <Table ref="table" border :columns="columns" :data="data" @on-selection-change="setBook" height="400"></Table>
        </div>
        <div>
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import reg from '../../util/formReg';
    export default {
        props: ['ids'],
        data () {
            return {
                columns: [{
                    width: 55,
                    type: 'selection',
                    align: 'center'
                }, {
                    title: '教材名称',
                    key: 'name'
                }, {
                    title: '价格（元）',
                    key: 'price'
                }, {
                    title: '作者',
                    key: 'author'
                }, {
                    title: '版本',
                    key: 'edition'
                }, {
                    title: '出版社',
                    key: 'press'
                }],
                data: [],
                query: {},
                total: 0,
                pageIndex: 1,
                pageSize: 15,
                books: [],
                tableHeight: 0
            };
        },
        watch: {
            ids (newVal, oldVal) {
                if (newVal) {
                    this.loadList();
                }
            }
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                let queryData = {};
                queryData.status = 'YES';
                queryData.name = this.query.name ? this.query.name : '';
                queryData.page = this.pageIndex;
                queryData.size = this.pageSize;
                util.ajax.post('/busine/book/list', util.toFormData(queryData)).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                    for (let i in this.data) {
                        if (reg.isNotEmpty(this.ids) && this.ids.indexOf(this.data[i].id) >= 0) {
                            this.data[i]._checked = true;
                        }
                    }
                });
            },
            refresh () {
                this.query = {};
                this.loadList();
                this.$refs.element.selectAll(false);
            },
            setBook (selection) {
                this.books = selection;
            }
        }
    };
</script>